<template>
    <div class="platformContainer">
        <el-card shadow="always" class="header_card">
            <el-form :inline="true" :model="formInline">
                <el-form-item label="丢失状态">
                    <el-select v-model="formInline.region" placeholder="全部">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="设备类型">
                    <el-select v-model="formInline.region" placeholder="全部">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="在库状态">
                    <el-select v-model="formInline.region" placeholder="在库状态">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="序列号">
                    <el-input v-model="formInline.user" placeholder="请输入序列号"></el-input>
                </el-form-item>
                <el-form-item label="用户名">
                    <el-input v-model="formInline.user" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="手机号码" v-if="changed">
                    <el-input v-model="formInline.user" placeholder="请输入手机号码"></el-input>
                </el-form-item>
                <el-form-item label="监管状态" v-if="changed">
                    <el-select v-model="formInline.region" placeholder="监管状态">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="最后通讯时间" v-if="changed">
                    <el-select v-model="formInline.region" placeholder="最后通讯时间">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="时间" v-if="changed">
                    <div class="block">
                        <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-row :gutter="20">
                        <el-col :span="7"><el-button type="primary">搜索</el-button></el-col>
                        <el-col :span="7"><el-button>重置</el-button></el-col>
                        <el-col :span="7"><el-button @click="change">更多<i
                                    :class="[changed ? 'el-icon-arrow-up' : 'el-icon-arrow-down']"></i></el-button></el-col>
                    </el-row>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span class="header_title">设备列表</span>
                <el-tooltip class="item" effect="dark" :content="content" placement="bottom">
                    <i class="el-icon-warning-outline icon_i"></i>
                    <div class="tooltip_content" slot="content">
                        <p>【添加设备】：支持添加设备和资产信息</p>
                        <p>【设备更新】：更新当前的设备数据及状态</p>
                        <p>【设备编辑】：编辑设备型号、用户名、手机号</p>
                        <p>【丢失设备】：远程锁定设备，设置锁定屏幕提示文字</p>
                        <p>【下发激活锁】：使设备输入激活锁密码才可激活（一次性密码在详情页）</p>
                        <p>【淘汰设备】：设备进入回收站</p>
                    </div>
                </el-tooltip>
                <el-button type="primary" icon="el-icon-plus" size="small" @click="click_add('添加设备')">添加设备</el-button>
                <el-button icon="el-icon-refresh" size="small">设备更新</el-button>
                <el-button icon="el-icon-edit-outline" size="small" @click="click_add('编辑设备')">设备编辑</el-button>
                <el-button icon="el-icon-more-outline" size="small" @click="opten_detail">设备详情</el-button>
                <el-button icon="el-icon-lock" size="small" @click="click_lost">丢失设备</el-button>
                <el-button icon="el-icon-unlock" size="small">解除丢失</el-button>
                <el-button icon="el-icon-key" size="small">下发激活锁</el-button>
                <el-button icon="el-icon-delete" size="small" @click="taotai">淘汰设备</el-button>
                <el-button icon="el-icon-download" size="small">导出列表数据</el-button>
                <el-button icon="el-icon-refresh-right" size="small" @click="reload">批量更新系统</el-button>
                <el-button :icon="[table_unfold ? 'el-icon-arrow-up' : 'el-icon-arrow-down']" size="small"
                    @click="click_unfold" class="unfold">展开</el-button>
            </div>
            <!-- card内容 -->
            <div class="table_card" style="width: 99%;">
                <el-table :data="device_list" :header-cell-style="headerRowStyle2" class="table1" height="7.8rem">
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column prop="eliminatedStatus" label="序列号">
                    </el-table-column>
                    <el-table-column prop="state" label="设备型号">
                    </el-table-column>
                    <el-table-column prop="state" label="设备类型">
                    </el-table-column>
                    <el-table-column prop="operate" label="用户名">
                    </el-table-column>
                    <el-table-column prop="activationLock" label="手机号">
                    </el-table-column>
                    <el-table-column prop="deviceStatus" label="激活锁">
                        <template slot-scope="scope">
                            <el-tag type="success" v-if="scope.row.deviceStatus === '1'">已上锁</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="serverStatus" label="丢失状态">
                        <template slot-scope="scope">
                            <el-tag type="danger" v-if="scope.row.serverStatus === '1'">正常</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="abmStatus" label="删除监管">
                        <template slot-scope="scope">
                            <el-tag type="danger" v-if="scope.row.abmStatus === '1'">正常</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="abmStatus" label="ABM状态">
                        <template slot-scope="scope">
                            <el-tag type="danger" v-if="scope.row.abmStatus === '1'">正常</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="abmStatus" label="系统版本">
                    </el-table-column>
                    <el-table-column prop="abmStatus" label="添加日期">
                    </el-table-column>
                    <el-table-column prop="abmStatus" label="创建人" v-if="table_unfold">
                    </el-table-column>
                    <el-table-column prop="abmStatus" label="最后通讯地址" v-if="table_unfold">
                    </el-table-column>
                    <el-table-column prop="operate" label="最后通讯时间">
                    </el-table-column>
                </el-table>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper" :total="400">
                </el-pagination>
            </div>
        </el-card>
        <el-dialog title="设备详情" custom-class="device_detail" :visible="device_detail" width='60%'
            :before-close="handleClose1">
            <el-card class="box-card">
                <!-- <div slot="header" class="clearfix">
                    <span class="card_title">设备详情</span>
                </div> -->
                <div class="systemSettingsNav">
                    <el-menu :default-active="ml_defaultIndex" class="el-menu-demo" mode="horizontal"
                        @select="ml_handleSelect">
                        <el-menu-item index="ml_tag1">设备信息</el-menu-item>
                        <el-menu-item index="ml_tag2">限制APP策略</el-menu-item>
                        <el-menu-item index="ml_tag3">限制下发策略</el-menu-item>
                        <el-menu-item index="ml_tag4">消息推送</el-menu-item>
                        <el-menu-item index="ml_tag5">壁纸策略</el-menu-item>
                        <el-menu-item index="ml_tag6">操作记录</el-menu-item>
                        <el-menu-item index="ml_tag7">安装APP</el-menu-item>
                        <el-menu-item index="ml_tag8">设备定位</el-menu-item>
                    </el-menu>
                </div>
                <div class="sf_main" v-if="ml_activeIndex === 'ml_tag1'">
                    <div class="part1">
                        <el-descriptions title="设备信息" :colon="true" column="3">
                            <el-descriptions-item label="序列号">kooriookami</el-descriptions-item>
                            <el-descriptions-item label="设备型号">18100000000</el-descriptions-item>
                            <el-descriptions-item label="注册MDM">
                                <el-tag type="success">已注册</el-tag>
                            </el-descriptions-item>
                            <el-descriptions-item label="最后通信时间">kooriookami</el-descriptions-item>
                            <el-descriptions-item label="设备状态">
                                <el-tag type="success">正常</el-tag>
                            </el-descriptions-item>
                            <el-descriptions-item label="激活锁状态">
                                <el-tag type="success">已上锁</el-tag>
                            </el-descriptions-item>
                            <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
                            <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
                            <el-descriptions-item label="激活锁解锁密码">
                                <el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">
                                    <i class="iconfont icon-yanjing-"></i>
                                </el-tooltip>
                            </el-descriptions-item>
                            <el-descriptions-item label="限制APP策略">
                                <el-tag type="success">未限制</el-tag>
                            </el-descriptions-item>
                            <el-descriptions-item label="消息推送">
                                <el-tag type="success">未推送</el-tag>
                            </el-descriptions-item>
                            <el-descriptions-item label="壁纸政策">
                                <el-tag type="success">允许</el-tag>
                            </el-descriptions-item>
                            <el-descriptions-item label="颜色">kooriookami</el-descriptions-item>
                            <el-descriptions-item label="销售地区">18100000000</el-descriptions-item>
                            <el-descriptions-item label="内存">苏州市</el-descriptions-item>
                        </el-descriptions>
                    </div>
                    <div class="part2">
                        <el-descriptions title="设备网络信息" :colon="true" column="3">
                            <div slot="extra" class="part2_title">
                                <!-- <span>设备网络信息</span> -->
                                <el-select v-model="value" placeholder="请选择" size="small">
                                    <el-option v-for="item in options" :key="item.value" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                            <el-descriptions-item label="型号">kooriookami</el-descriptions-item>
                            <el-descriptions-item label="MEID">18100000000</el-descriptions-item>
                            <el-descriptions-item label="系统版本">苏州市</el-descriptions-item>
                            <el-descriptions-item label="卡1运营商">kooriookami</el-descriptions-item>
                            <el-descriptions-item label="设备电话号码">18100000000</el-descriptions-item>
                            <el-descriptions-item label="IMEI">苏州市</el-descriptions-item>
                            <el-descriptions-item label="卡2运营商">kooriookami</el-descriptions-item>
                            <el-descriptions-item label="设备电话号码">18100000000</el-descriptions-item>
                            <el-descriptions-item label="IMEI">苏州市</el-descriptions-item>
                        </el-descriptions>
                    </div>
                    <el-row>
                        <div class="btn_box">
                            <el-button type="primary">检测设备</el-button>
                            <el-button type="primary">丢失设备</el-button>
                            <el-button type="primary">接触丢失</el-button>
                            <el-button type="primary">设备更新</el-button>
                            <el-button type="primary">下发激活锁</el-button>
                            <el-button type="primary">更新系统</el-button>
                            <el-button type="primary">移除截屏密码</el-button>
                            <el-button type="danger">删除监管</el-button>
                            <el-button type="danger">移除激活锁</el-button>
                            <el-button type="danger">抹除设备</el-button>
                        </div>
                    </el-row>
                </div>
                <div class="sf_main" v-if="ml_activeIndex === 'ml_tag2'">
                    <div class="tag2_part1">
                        <el-row>
                            <el-col :span="1">
                                <span>类型:</span>
                            </el-col>
                            <el-col :span="3">
                                <div class="type_selected">
                                    <el-radio :label="3">仅允许部分应用</el-radio>
                                    <el-radio :label="6">解除APP限制</el-radio>
                                </div>
                            </el-col>
                            <el-col :span="3">
                                <div class="type_save">
                                    <el-button type="primary">保存并应用</el-button>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                    <div class="tag2_part2">
                        <el-row :gutter="40">
                            <el-col :span="12">
                                <el-input placeholder="请输入内容" v-model="input" clearable prefix-icon="el-icon-search">
                                </el-input>
                                <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
                                    <li v-for="(item, index) in appList" class="infinite-list-item">
                                        <div class="app-list">
                                            <div class="app" v-for="(item, index) in appList">
                                                <span class="iconfont2" v-html="item['iconfont']"></span>
                                                <span>{{ item.name }}</span>
                                                <div class="tianjia"> <i :class="item.suffixIcon"></i></div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </el-col>
                            <el-col :span="12">
                                <el-table :data="tableData" style="width: 100%" :header-cell-style="headerRowStyle"
                                    height="6rem">
                                    <el-table-column prop="date" label="icon">
                                    </el-table-column>
                                    <el-table-column prop="name" label="Name">
                                    </el-table-column>
                                    <el-table-column prop="state" label="应用状态">
                                    </el-table-column>
                                    <el-table-column prop="operate" label="操作">
                                    </el-table-column>
                                </el-table>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <div class="sf_main" v-if="ml_activeIndex === 'ml_tag3'">
                    <div class="tag3_content">
                        <el-row :gutter="40">
                            <el-col :span="1" style="display: flex;justify-content: flex-end;align-items: center;">
                                <i class="el-icon-warning-outline"></i>
                            </el-col>
                            <el-col :span="10">
                                <div class="tactics">
                                    <template>
                                        <el-table height="400" :data="tactics_data" style="width: 100%"
                                            :header-cell-style="headerRowStyle2" :selectable="isRowSelectable"
                                            @selection-change="handleSelectionChange">>
                                            <el-table-column prop="name" label="下发策略(勾选为已下发策略)">
                                            </el-table-column>
                                            <el-table-column type="selection">
                                            </el-table-column>
                                        </el-table>
                                    </template>
                                </div>
                            </el-col>
                            <el-col :span="2">
                                <el-button type="primary">更改策略</el-button>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <div class="sf_main" v-if="ml_activeIndex === 'ml_tag4'">
                    <div class="tag4_content">
                        <div class="phone_img">
                            <img src="">
                        </div>
                        <div class="tag4_form">
                            <el-form label-position="left" label-width="1.75rem">
                                <el-form-item label="前置信息">
                                    <el-input v-model="formInline.user" placeholder="前置信息"></el-input>
                                </el-form-item>
                                <el-form-item label="后置信息">
                                    <el-input v-model="formInline.user" placeholder="后置信息"></el-input>
                                </el-form-item>
                                <el-form-item label="消息自动清除时间">
                                    <el-input placeholder="请选择日期" prefix-icon="el-icon-date" v-model="input1">
                                    </el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-row :gutter="20">
                                        <el-col :span="8"><el-button type="danger"
                                                @click="onSubmit">清空消息推送</el-button></el-col>
                                        <el-col :span="5"><el-button type="primary"
                                                @click="onSubmit">发送</el-button></el-col>
                                        <el-col :span="5"><el-button @click="onSubmit">重置</el-button></el-col>
                                    </el-row>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>
                </div>
                <div class="sf_main" v-if="ml_activeIndex === 'ml_tag5'">
                    <div class="tag5_form">
                        <el-form :inline="true" :model="formInline" class="demo-form-inline">
                            <el-form-item label="审批人">
                                <el-select v-model="value" placeholder="同时设置">
                                    <el-option v-for="item in options" :key="item.value" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="活动区域">
                                <el-select v-model="formInline.region" placeholder="活动区域">
                                    <el-option label="区域一" value="shanghai"></el-option>
                                    <el-option label="区域二" value="beijing"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary">设置</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div class="tag5_content">
                        <div class="tag5_list">
                            <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
                                <li v-for="(item, index) in appList" class="infinite-list-item">
                                    <div class="tag5_app" v-for="(item, index) in tag5_list">
                                        <img src="item.imgSrc" />
                                        <span>{{ item.name }}</span>
                                        <div class="tag5_tianjia">
                                            <i :class="item.suffixIcon"></i>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="tag5_img">
                            <div class="imgStyle">
                                <el-tag closable type="warning"><i class="el-icon-warning"></i>注：此图片为下发到设备的图片</el-tag>
                                <img src="@/assets/img/yiyuqi.jpg" />
                                <span>图片名称：已逾期</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="sf_main" v-if="ml_activeIndex === 'ml_tag6'">
                    <div class="table" style="width: 99%;">
                        <el-table :data="tableData" :header-cell-style="headerRowStyle2" class="tag6_table" height="7rem">
                            <el-table-column prop="date" label="发布时间">
                            </el-table-column>
                            <el-table-column prop="name" label="操作日志">
                            </el-table-column>
                            <el-table-column prop="state" label="设备序列号">
                            </el-table-column>
                            <el-table-column prop="operate" label="操作账号">
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="pagination">
                        <el-pagination background layout="prev, pager, next" :total="1000">
                        </el-pagination>
                    </div>
                </div>
                <div class="sf_main" v-if="ml_activeIndex === 'ml_tag7'">
                    <div class="tag6">
                        <div class="tag6_left">
                            <el-descriptions title="APP Store应用安装" :column="1" :colon="false">
                                <el-descriptions-item>
                                    <el-input placeholder="请输入内容" prefix-icon="el-icon-search" />
                                </el-descriptions-item>
                            </el-descriptions>
                            <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
                                <li v-for="(item, index) in appList" class="infinite-list-item">
                                    <div class="app-list">
                                        <div class="app" v-for="(item, index) in appList">
                                            <span class="iconfont2" v-html="item['iconfont']"></span>
                                            <span>{{ item.name }}</span>
                                            <div class="anzhuang_btn"><el-button type="text">安装</el-button></div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="tag6_right">
                            <el-descriptions title="非APP Store应用安装，例如企业级应用" :column="1" :colon="false">
                                <el-descriptions-item>
                                    <el-input placeholder="请输入应用地址" />
                                    <el-button class="anzhuang" type="primary">安装</el-button>
                                </el-descriptions-item>
                            </el-descriptions>
                        </div>
                    </div>
                </div>
                <div class="sf_main" v-if="ml_activeIndex === 'ml_tag8'">

                </div>
            </el-card>
        </el-dialog>

        <el-dialog :title="dialog_title" :visible="add_device" width='30%' :before-close="close_add">
            <el-form :label-position="top">
                <el-form-item label="序列号">
                    <el-input placeholder="请输入序列号"></el-input>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input placeholder="请输入姓名"></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input placeholder="请输入手机号"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="丢失设备" :visible="lost_device" width='30%' :before-close="close_lost">
            <el-form :label-position="top">
                <el-form-item label="显示文字">
                    <el-input type="textarea" autosize placeholder="请输入丢失显示文字" v-model="textarea1">
                    </el-input>
                </el-form-item>
                <el-form-item label="请输入可拨打电话">
                    <el-input placeholder="请输入手机号"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="批量更新系统" :visible="reload_device" width='30%' :before-close="close_reload">
            <el-form label-width="1rem">
                <el-tag type="danger" class="reload_tag">此操作会让设备更新到最新版本，用户最多可以选择延迟安装3次，3次后不升级系统则无法再继续使用设备，此操作可能会引起用户投诉，确认更新吗？</el-tag>
                <el-form-item label="二级密码">
                    <el-input placeholder="二级密码"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>



export default {
    data() {
        return {
            reload_device: false,
            lost_device: false,
            dialog_title: '',
            add_device: false,
            changed: false,
            content: "",
            device_detail: false,
            ml_activeIndex: 'ml_tag1',
            ml_defaultIndex: 'ml_tag1',
            form: '',
            radio: '0',
            content_style: {
                'width': '15%',
            },
            size: 'small',
            memberList: [
                {
                    name: 'judy',
                },
                {
                    name: 'sang',
                }
            ],
            tableData: [
                {
                    icon: 'el-icon-star-on',
                    name: 'lucy',
                    state: '不允许使用',
                    operate: '禁止操作'
                },
                {
                    icon: 'el-icon-star-on',
                    name: 'lucy',
                    state: '不允许使用',
                    operate: '禁止操作'
                },
                {
                    icon: 'el-icon-star-on',
                    name: 'lucy',
                    state: '不允许使用',
                    operate: '禁止操作'
                },
                {
                    icon: 'el-icon-star-on',
                    name: 'lucy',
                    state: '不允许使用',
                    operate: '禁止操作'
                },
                {
                    icon: 'el-icon-star-on',
                    name: 'lucy',
                    state: '不允许使用',
                    operate: '禁止操作'
                },
                {
                    icon: 'el-icon-star-on',
                    name: 'lucy',
                    state: '不允许使用',
                    operate: '禁止操作'
                },
                {
                    icon: 'el-icon-star-on',
                    name: 'lucy',
                    state: '不允许使用',
                    operate: '禁止操作'
                },
                {
                    icon: 'el-icon-star-on',
                    name: 'lucy',
                    state: '不允许使用',
                    operate: '禁止操作'
                },
                {
                    icon: 'el-icon-star-on',
                    name: 'lucy',
                    state: '不允许使用',
                    operate: '禁止操作'
                },
                {
                    icon: 'el-icon-star-on',
                    name: 'lucy',
                    state: '不允许使用',
                    operate: '禁止操作'
                },
                {
                    icon: 'el-icon-star-on',
                    name: 'lucy',
                    state: '不允许使用',
                    operate: '禁止操作'
                },
                {
                    icon: 'el-icon-star-on',
                    name: 'lucy',
                    state: '不允许使用',
                    operate: '禁止操作'
                },
                {
                    icon: 'el-icon-star-on',
                    name: 'lucy',
                    state: '不允许使用',
                    operate: '禁止操作'
                },
                {
                    icon: 'el-icon-star-on',
                    name: 'lucy',
                    state: '不允许使用',
                    operate: '禁止操作'
                }
            ],
            headerRowStyle: {
                'backgroundColor': '#f8f8f9'
            },
            appList: [
                {
                    iconfont: '&#xe637;',
                    name: '微信',
                    suffixIcon: 'el-icon-plus'
                },
                {
                    iconfont: '&#xe600;',
                    name: 'QQ',
                    suffixIcon: 'el-icon-plus'
                },
                {
                    iconfont: '&#xe663;',
                    name: '支付宝',
                    suffixIcon: 'el-icon-plus'
                },
                {
                    iconfont: '&#xe617;',
                    name: '夸克',
                    suffixIcon: 'el-icon-plus'
                },
                {
                    iconfont: '&#xe617;',
                    name: '夸克',
                    suffixIcon: 'el-icon-plus'
                },
                {
                    iconfont: '&#xe617;',
                    name: '夸克',
                    suffixIcon: 'el-icon-plus'
                },
                {
                    iconfont: '&#xe617;',
                    name: '夸克',
                    suffixIcon: 'el-icon-plus'
                },
                {
                    iconfont: '&#xe617;',
                    name: '夸克',
                    suffixIcon: 'el-icon-plus'
                },
                {
                    iconfont: '&#xe617;',
                    name: '夸克',
                    suffixIcon: 'el-icon-plus'
                },
                {
                    iconfont: '&#xe617;',
                    name: '夸克',
                    suffixIcon: 'el-icon-plus'
                },
                {
                    iconfont: '&#xe617;',
                    name: '夸克',
                    suffixIcon: 'el-icon-plus'
                },
                {
                    iconfont: '&#xe617;',
                    name: '夸克',
                    suffixIcon: 'el-icon-plus'
                },
            ],
            tactics_data: [
                {
                    name: '滴滴滴滴点',
                    selectable: true
                },
                {
                    name: '哒哒哒哒哒',
                    selectable: false
                }
            ],
            headerRowStyle2: {
                'backgroundColor': '#f8f8f9',
                'color': 'black'
            },
            formInline: {},
            tag5_list: [
                {
                    imgSrc: '',
                    name: '壁纸1',
                    suffixIcon: 'el-icon-plus'
                }
            ],
            count: 5,
            options: [],
            table_unfold: false,
            device_list: [
                {
                    state: 'aaa',
                    deviceStatus: '1'
                }
            ]
        }
    },
    methods: {
        ml_handleSelect(key, keyPath) {
            this.ml_activeIndex = key
        },
        handleClick(row) {
            // 跳转
            console.log(row);
            this.$router.push({ path: '/memberManage/memberInfo' })
        },
        isRowSelectable(row, index) {
            // 根据row的selectable属性来决定这一行是否可以被选择
            return row.selectable
        },
        handleSelectionChange(selection) {
            // 处理选中项变化
            console.log(selection);
        },
        load() {
            // this.count += 2
        },
        change() {
            //更换图标
            this.changed = !this.changed
            //切换是否显示
            this.createTimeShow = !this.createTimeShow
        },
        opten_detail() {
            this.device_detail = true
        },
        handleClose1() {
            this.device_detail = false
        },
        click_unfold() {
            this.table_unfold = !this.table_unfold
        },
        click_add(title) {
            this.dialog_title = title
            this.add_device = true
        },
        close_add() {
            this.add_device = false
        },
        click_lost() {
            this.lost_device = true
        },
        close_lost() {
            this.lost_device = false
        },
        taotai() {
            this.$confirm('确定要淘汰设备吗？', '系统提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        reload() {
            this.reload_device = true
        },
        close_reload() {
            this.reload_device = false
        }
    },
    // 使用
    mounted() {
        this.$nextTick(() => {
        });
    },
}
</script>
<style scoped>
.reload_tag{
    height:auto;
    white-space: pre-wrap;
    margin-bottom: .125rem;
}
.unfold {
    position: absolute;
    right: 0;
    background-color: #f0f2f5;
    color: #417aff;
}

.btn_box {
    display: flex;
    flex-wrap: wrap;
    width: 80%;
    align-content: flex-start;
}

.el-dialog.device_detail {
    margin-top: 4vh !important;
    height: 85vh !important;
    overflow: auto;
}

::v-deep .el-card__header {
    padding: .125rem .25rem !important;
}

.tooltip_content {
    width: 5.875rem;
}

.header_title {
    font-weight: bold;
    margin-right: .25rem;
    display: flex;
    align-items: center;
}

.tooltip_content p {
    margin-bottom: 0.125rem;
}

.icon_i {
    width: .625rem;
    height: .375rem;
    text-align: center;
    line-height: .375rem;
    border-radius: .125rem;
}

.icon_i:hover {
    color: #417aff;
    background-color: #ebf1ff;
}

.clearfix {
    display: flex;
    position: relative;
}

::v-deep .el-date-editor .el-range-separator {
    width: 7% !important;
}

.item {
    cursor: pointer;
}

::v-deep .el-descriptions-item__container .el-descriptions-item__content,
.el-descriptions-item__container .el-descriptions-item__label {
    align-items: center;
}

.card_title {
    font-size: medium;
    font-weight: bold;

}

.box-card {
    height: 100%;
}

.platformContainer {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.sf_main {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: .25rem;
}

.part1 {
    flex: 1;
    margin-bottom: .25rem;
}

.part2 {
    flex: 1;
    margin-bottom: .25rem;
}

::v-deep .el-descriptions__header {
    justify-content: flex-start !important;
}

::v-deep .el-descriptions__title {
    margin-right: .25rem !important;
}

.tag2_part1 {
    display: flex;
    align-items: center;
}

.tag2_part1 .el-row {
    width: 100%;
}

.type_selected {
    display: flex;
    flex-direction: column;
}

.type_selected .el-radio {
    margin-bottom: .125rem;
}

.tag2_part2 {
    margin-top: .25rem;
}

.app-list {
    display: flex;
    flex-direction: column;
    /* height: 400px; */
    overflow: auto;
    margin-top: .125rem;
}

.app {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eff1f6;
    height: .75rem;
    align-items: center;
    color: #4d74ff;
}


.app span {
    font-size: .225rem;
}

.tag4_content {
    display: flex;
}

.phone_img {
    width: 3.75rem;
    height: 100%;
    background-color: aquamarine;
    margin-right: .25rem;
}

.tag4_form {
    width: 30vw;
}

.tag5_content {
    display: flex;
}

.tag5_list {
    margin-right: .25rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.tag5_app {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eff1f6;
    height: .75rem;
    align-items: center;
    color: #4d74ff;
}

.tag5_app span {
    font-size: .2rem !important;
}

.tag5_tianjia {
    width: .75rem;
}

.tag5_tianjia i {
    font-size: .2rem !important;
    cursor: pointer;
}

.tag5_img {
    flex: 2;
    display: flex;
    flex-direction: column;
}

.imgStyle {
    width: 2.5rem;
}

.imgStyle span {
    display: inline-block;
}

.imgStyle img {
    margin: .125rem 0;
}

.pagination {
    display: flex;
    justify-content: flex-end;
    padding: .125rem 0;
}

.tag6_table {
    flex: 1;
}

.tag6 {
    display: flex;
}

.tag6_left {
    margin-right: .25rem;
    flex: 1;
}

.tag6_right {
    flex: 1;
}

.infinite-list {
    height: 5.625rem;
    margin-top: .125rem;
}

.anzhuang {
    margin-left: .25rem;
}

.anzhuang_btn {
    width: .75rem;
}

.anzhuang_btn .el-button {
    font-size: .225rem !important;
}

.tianjia i {
    font-size: .225rem !important;
    cursor: pointer;
}

.tianjia {
    width: .75rem;
}


.header_card {
    margin-bottom: .25rem;
}

::v-deep .el-form-item {
    margin-bottom: .125rem !important;
}

.content {
    padding: .25rem;
}

::v-deep .el-descriptions__header {
    justify-content: flex-start;
}

::v-deep .el-descriptions__title {
    margin-right: .25rem;
}
</style>